<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react下的表单处理</title>
</head>
<body>


<div id="app">



</div>
</body>
<script src="../lib/react/react.development.js"></script>
<script src="../lib/react/react-dom.development.j.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">



    class InputTestor extends  React.Component{

        constructor(props) {
            super(props);

            this.state ={
                 username:'default'
            }

            this.inputChange = this.inputChange.bind(this);
        }


        inputChange(event){
            this.setState(
                {
                    value:event.target.value
                }
            );
        }

        render(){

            const val = this.state.value;

            return <div>
                     <div>
                         用户名:<input value={val} onChange={this.inputChange}/>
                     </div>
                     <div>
                         {val}
                     </div>
                      <div>
                          <button>提交</button>
                      </div>
            </div>

        }

    }



    ReactDOM.render(<InputTestor/>,document.getElementById('app'));




</script>
</html>